<template>
  <div class="app-container home">
    <div class="title">代理账户</div>
    <div class="box" style="margin-top: 20px;">
        <div><span>登录账户:</span>{{detail.userNo}}</div>
        <div style="margin-left: 50px;"><span>钱包余额:</span>{{balance}}</div>
        <!-- <div style="margin-left: 50px;"><span>待收款:</span>{{ detail.amount }}</div> -->
    </div>
    <div style="margin-top: 20px;">
        客户端余额:{{ detail.amount }}
    </div>
    <div style="margin: 20px 0;">
      <span>代理收款码:</span><br>
      <el-image style="width: 150px;height: 150px;margin-top: 20px;" fit="fill" :src="detail.imageUrl" />
    </div>
    <!-- <div class="title">关联APP账户</div>
    <div class="box" style="margin-top: 20px;padding-right: 65%;">
        <div><span>账户ID:</span>13320201884</div>
        <div style="margin-left: 50px;"><span>余额:</span>5181</div>
    </div> -->
    <div style="margin-top: 20px;">
      <!-- <el-button type="danger" @click="unbound">解绑</el-button> -->
      <el-button type="success" @click="onChange">更换绑定</el-button>
    </div>
    <el-dialog title="绑定" v-model="open" width="600px" append-to-body>
      <el-form :model="form" label-width="80px">
        <el-form-item label="账户Id" prop="userNo">
          <el-input v-model="form.userNo" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="上传图片">
          <image-upload v-model="form.imageUrl" :limit="1"></image-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { boundUser,getBoundUser,getWalletBalance } from "@/api/charge/index";

const { proxy } = getCurrentInstance();
const open = ref(false)
const form = ref({
  userNo:'',
  password:'',
  imageUrl:''
})
const balance = ref(0)
const detail = ref({})
const onChange = () => {
  open.value = true
}
const submitForm = () => {
  boundUser(form.value).then(res => {
    if(res.code == 200) {
      proxy.$modal.msgSuccess("修改成功");
      getData()
      getWallet()
      open.value = false
    }
  })
}
const getData = () => {
  getBoundUser().then(res => {
    detail.value = res.data
  })
}
const cancel = () => {
  open.value = false
}
const getWallet = () => {
  getWalletBalance().then(res => {
    balance.value = res.data
  })
}

getData()
getWallet()
</script>

<style scoped lang="scss">
.title {
  font-weight: 700;
  font-size: 17px;
}
.box {
  display: flex;
}
</style>

